<script setup>

import router from "@/router/index.js";
import {HomeFilled,DataAnalysis,UserFilled} from '@element-plus/icons-vue'
</script>

<template>
<!--  头部 开始-->
  <div style="height:60px;background-color:#00bbff;align-items: center;padding-left:20px; display: flex">
<!--    头部左侧的logo与系统名称展示开始-->
    <div style="width: 200px;display:flex; height: 60px;align-items: center;">
      <img src="@/assets/logo.png" alt="" style = "width: 40px; height: 40px;">
      <div style="align-items: center; font-size:20px; color:white; margin-left:10px; ">
        后台管理系统
      </div>
      </div>
<!--    头部左侧的logo与系统名称展示结束-->
    <div style="flex: 1;">
    </div>

<!--    头部右侧开始，用户名与头像展示开始-->
    <div style=" width: fit-content; display: flex; align-items: center; padding-right: 5px;">
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
      <span style="color:white;padding-left: 5px">泳</span>

    </div>
<!--    头部右侧结束，用户名与头像战事结束-->

  </div>

<!--  头部 结束-->

<!--  body 开始-->
  <div style="display: flex;">

<!--    左侧导航栏开始-->
    <div style="width: 200px;border-right: 1px solid #ddd; min-height:calc(100vh - 60px) ">
      <el-menu style="border:0"
               router
               :default-active="router.currentRoute.value.path"
               :default-openeds="['1']">
        <el-menu-item index="/manager/home">
          <el-icon>
            <HomeFilled/>
          </el-icon>
         系统首页
        </el-menu-item>
        <el-menu-item index="/manager/data">
          <el-icon>
            <DataAnalysis/>
          </el-icon>
          数据统计
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <UserFilled/>
            </el-icon>
            用户管理
          </template>
          <el-menu-item>
            用户列表
          </el-menu-item>
          <el-menu-item>
            用户角色
          </el-menu-item>
          <el-menu-item index="/manager/admin">
            管理员列表
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

    </div>
<!--    左侧导航栏结束-->

<!--    右侧数据块开始-->
    <div style="flex: 1;width: 0;background-color: #dfd6d6">
      <RouterView/>
    </div>
<!--    右侧数据块结束-->

  </div>
<!--  body 结束-->

</template>

<style scoped>

</style>